<template>
  <view class="container">
    <view class="header">
      <text class="title">提现</text>
      <text class="balance">可提现余额：¥{{balance.toFixed(2)}}</text>
    </view>

    <view class="withdraw-card">
      <text class="label">提现金额</text>
      <view class="input-area">
        <text class="prefix">¥</text>
        <input 
          class="input" 
          type="number" 
          v-model="amount" 
          placeholder="请输入提现金额"
          placeholder-class="placeholder"
          @input="validateAmount"
        />
      </view>
      <text class="hint" v-if="amountError">{{amountError}}</text>
      <text class="hint" v-else>最低提现金额¥100.00</text>
    </view>

    <view class="bank-card">
      <text class="label">到账银行卡</text>
      <view class="bank-item" @click="selectBank">
        <image class="bank-icon" src="/static/bank/icbc.png"></image>
        <view class="bank-info">
          <text class="bank-name">工商银行</text>
          <text class="bank-number">尾号{{bankCard.number.slice(-4)}}</text>
        </view>
        <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
      </view>
    </view>

    <button 
      class="submit-btn" 
      :class="{disabled: !canSubmit}"
      :disabled="!canSubmit"
      @click="submitWithdraw"
    >
      确认提现
    </button>

    <view class="record-link" @click="goToRecord">
      <text>提现记录</text>
      <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      balance: 1586.50,
      amount: '',
      amountError: '',
      bankCard: {
        id: 1,
        name: '工商银行',
        number: '6212260200123456789',
        icon: '/static/bank/icbc.png'
      }
    }
  },
  computed: {
    canSubmit() {
      return this.amount && !this.amountError && parseFloat(this.amount) >= 100
    }
  },
  methods: {
    validateAmount() {
      const amount = parseFloat(this.amount)
      if (isNaN(amount)) {
        this.amountError = '请输入有效金额'
      } else if (amount < 100) {
        this.amountError = '提现金额不能低于100元'
      } else if (amount > this.balance) {
        this.amountError = '提现金额不能超过余额'
      } else {
        this.amountError = ''
      }
    },
    selectBank() {
      uni.navigateTo({
        url: '/pages/bank/list'
      })
    },
    submitWithdraw() {
      if (!this.canSubmit) return
      
      uni.showLoading({
        title: '处理中...'
      })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '提现申请已提交',
          icon: 'success'
        })
        
        // 更新余额
        this.balance -= parseFloat(this.amount)
        this.amount = ''
        
        // 通知my页面更新余额
        const pages = getCurrentPages()
        if (pages.length > 1) {
          const prevPage = pages[pages.length - 2]
          if (prevPage.route === 'pages/my/my') {
            prevPage.$vm.balance = this.balance
          }
        }
      }, 1500)
    },
    goToRecord() {
      uni.navigateTo({
        url: '/pages/withdraw/record'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #f7f7f7;
}

.header {
  margin-bottom: 40rpx;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .balance {
    font-size: 28rpx;
    color: #999;
  }
}

.withdraw-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .label {
    font-size: 28rpx;
    color: #666;
    display: block;
    margin-bottom: 30rpx;
  }
  
  .input-area {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #eee;
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
    
    .prefix {
      font-size: 50rpx;
      font-weight: bold;
      color: #333;
      margin-right: 20rpx;
    }
    
    .input {
      flex: 1;
      font-size: 50rpx;
      font-weight: bold;
      height: 70rpx;
      line-height: 70rpx;
    }
    
    .placeholder {
      font-size: 32rpx;
      color: #ccc;
    }
  }
  
  .hint {
    font-size: 24rpx;
    color: #f56c6c;
  }
}

.bank-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  
  .label {
    font-size: 28rpx;
    color: #666;
    display: block;
    margin-bottom: 30rpx;
  }
  
  .bank-item {
    display: flex;
    align-items: center;
    
    .bank-icon {
      width: 60rpx;
      height: 60rpx;
      margin-right: 20rpx;
    }
    
    .bank-info {
      flex: 1;
      
      .bank-name {
        font-size: 32rpx;
        color: #333;
        display: block;
        margin-bottom: 5rpx;
      }
      
      .bank-number {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.submit-btn {
  background-color: #1989fa;
  color: #fff;
  border-radius: 50rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  margin-bottom: 30rpx;
  
  &.disabled {
    background-color: #c8c9cc;
    opacity: 0.6;
  }
}

.record-link {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1989fa;
  font-size: 28rpx;
  
  text {
    margin-right: 10rpx;
  }
}
</style>